<template>
	<view class="main">
		<u-gap height="20" bg-color="#f8f8f8"></u-gap>
		<view class="top_card">
			<view class="top_time">
				2024-06-11 10:26
			</view>
			<view class="jilu_title">
				<view class="rule_content_title">
					<view class="base_icon zhouqi"
						:class="{'zhouqi':result.jobType == 2,'dingshi':result.jobType == 1}">
						{{result.jobType == 1 ? '定时' : '周期'}}
					</view>
					<view class="m-l-10">
						{{cultString(result.jobName,14)}}
					</view>
				</view>
			</view>
			<view class="top_content">
				{{result.jobContent}}
			</view>
		</view>
		<view class="main_card">
			<view class="main_card_title">
				综合评估记录
			</view>
			<view class="card_content" v-for="(v,k) in result.recordInfoList">
				<view class="circle">
					<u-image :src="setpTime" width="24rpx" height="24rpx"></u-image>
					<view class="p-l-6">
						<u-line class="u-line" border-style="dashed" direction="col" :length="myLineHeight(v.recordDesc)"
							color="#ccc"></u-line>
					</view>
				</view>
				<view class="card_box">
					<view class="main_card_time">
						录入时间：{{v.createTime}}
					</view>
					<view class="right_card">
						<view class="main_card_content">
							{{showContentText(v.recordDesc,v.arrow) ?showContentText(v.recordDesc,v.arrow) : '暂无评估内容' }}
						</view>
						<view class="details" @click="wenjuanDetails(v)">
							{{v.quesName}}详情
						</view>
						<view class="rule_content_show" @click="showContent(k)"
							v-if="v.recordDesc&&v.recordDesc.length >= maxContent">
							点击展开 <u-icon class="m-l-8" :name="v.arrow" color="#666"></u-icon>
						</view>
					</view>
					<view class="job_empty" v-if="result.recordInfoList.length == 0">
						<view class="">
							<u-image width="335rpx" height="320rpx" :src="actionImg"></u-image>
						</view>
						<view class="empty_text">
							{{emptyText}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		customergetSuifang,
		pingguUrl
	} from '@/api/index'
	export default {
		data() {
			return {
				maxContent: 70,
				setpTime: require('@/static/icon/Time node@2x.png'),
				externalUserId: '',
				planJobId:'',
				actionImg: require('@/static/img/No_follow.png'),
				emptyText: '暂无评估记录',
				result: { //接口返回数据
					externalUserId: "",
					jobContent: "",
					jobName: "",
					jobStartTime: "",
					jobType: 1,
					planId: "",
					planJobId: 1726198081337,
					recordInfoList: [],
					quesTemplateId:'',  //模板ID
					quesResultId:'' //回显ID
				}
			}
		},
		computed: {
			cultString(val, num) {
				return (val, num) => {
					let myString = val.toString()
					if (val.length > num) {
						return val.slice(0, num) + '...'
					} else {
						return val
					}
				}
			},
			myLineHeight(content){
				return (content)=>{
					if(!content)return '70rpx'
					if(content && content.length <70){
						return '30rpx'
					}
					if(content && content.length >= 70 &&  content.length <this.maxContent){
						return '150rpx'
					}
					return '240rpx'
				}
				
			},
			showContentText(text, arrow) {
				return (text, arrow) => {
					if (arrow == 'arrow-down') {
						return this.cultString(text, this.maxContent)
					} else {
						return text
					}
				}
			}
		},
		onLoad(obj) {
			if (obj.externalUserId) this.externalUserId = obj.externalUserId
			if(obj.planJobId) this.planJobId = obj.planJobId
		},
		onShow() {
			this.getNavList()
		},
		methods: {
			async wenjuanDetails(obj){
				if(obj.quesResultId){
					this.quesResultId = obj.quesResultId
					let res = await pingguUrl({'quesTemplateId':this.quesTemplateId,'quesResultId':this.quesResultId})
					if(res.code == 200){
						window.location.href = res.quesShowUrl
					}else{
						this.$u.toast(res.msg)
					}
					//console.log(res,'res');
				}else{
					this.$u.toast('暂无问卷详情')
				}
				
			},
			showContent(key) {
				this.contentList[key].arrow == 'arrow-up' ? this.contentList[key].arrow = 'arrow-down' : this.contentList[key].arrow = 'arrow-up'
			},
			async getNavList() {
				let res = await customergetSuifang(4, this.externalUserId,this.planJobId) //4详情，固定写法
				if (res.code == 200) {
					this.result = res.data
					this.quesTemplateId = res.data.quesTemplateId
				}
				//console.log(res, 'aaa');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f8f8f8;
		min-height: 130vh;

		.top_card {
			background-color: #FFFFFF;
			margin: 0 20rpx 24rpx;
			padding: 24rpx;
			border-radius: 20rpx;

			.top_time {
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				line-height: 33rpx;
			}

			.jilu_title {
				.rule_content_title {
					margin-top: 6rpx;
					display: flex;
					align-items: center;
					//border-bottom: 1px solid #ccc;
					padding-bottom: 12rpx;

					.base_icon {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 4rpx 6rpx 6rpx 6rpx;
						width: 70rpx;
						height: 40rpx;
						background: #FF8D07;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 28rpx;
						border-radius: 8rpx;
					}

					.zhouqi {
						background: #FF8D07;
					}

					.dingshi {
						background-color: #4DC0D9;
					}
				}
			}

			.top_content {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}
		}

		.main_card {
			background-color: #FFFFFF;
			margin: 0 24rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.main_card_title {
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
				line-height: 38rpx;
				padding: 24rpx;
				border-bottom: 1px solid #eee;

			}

			.card_content {
				display: flex;
				position: relative;

				.circle {
					position: absolute;
					top: 94rpx;
					left: 24rpx;
				}

				.card_box {
					min-height: 200rpx;
					.main_card_time {
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						line-height: 33rpx;
						margin: 24rpx 24rpx 8rpx 72rpx;
					}

					.right_card {
						margin-left: 72rpx;

						.main_card_content {
							padding-right: 24rpx;
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							line-height: 35rpx;
							// opacity: 1; 
							// transition: opacity 2s;
						}

						.details {
							font-weight: 500;
							font-size: 30rpx;
							color: #4DC0D9;
							line-height: 35rpx;
							margin-top: 12rpx;
						}

						.rule_content_show {
							margin-top: 16rpx;
							margin-bottom: 60rpx;
							font-weight: 500;
							font-size: 30rpx;
							color: #666666;
							line-height: 36rpx;
						}
					}
					.job_empty {
						padding-top: 126rpx;
						min-height: 100vh;
						padding-bottom: 210rpx;
						display: flex;
						flex-direction: column;
						//justify-content: center;
						align-items: center;
					
						.empty_text {
							font-weight: 500;
							font-size: 36rpx;
							color: #C7C7C7;
							line-height: 1.5;
							text-align: center;
						}
					}
				}
			}

			.four_line {
				//超出四行省略
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>